<template>
  <div id="home" class="home-m">
    <div id="Navbar"></div>
    <div class="main-body-m">
      <section class="page-part" id="award-about">
        <h2 class="">关于金融领军者评选</h2>
        <p>华尔街见闻发起主办的金融领军者评选，旨在遴选年度金融领域表现最为强劲的领军者，为全行业树立标杆，打造中国金融界最具价值的评价平台。</p>
        <p>本次评选拟打造中国首个“原生”金融评选，首次将企业参评资料与大数据分析相结合，整合线上投票与线下专家评审，共同形成最终评选结果。本次评选将为行业提供极具价值的参考典范，为中国金融业前行再续动力。</p>
        <video-wrapper />
      </section>
      <section class="page-part" id="award-apply">
        <h2>报名参评</h2>
        <a href="#" class="apply-button apply-button" @click.prevent="showForm"><img src="../assets/button.png" style="width:11rem" alt=""></a>
        <p class="apply-attention">*报名须知：组委会会根据联系信息在2个工作日内与您取得联系，完成参评表单填写及后续流程。</p>
      </section>
      <section class="page-part" id="award-apply-fixed">
        <div class="container">
          <p class="apply-attention">*报名须知：组委会会根据联系信息在2个工作日内与您取得联系，完成参评表单填写及后续流程。</p>
          <a class="apply-button" @click.prevent="showForm"><img src="../assets/button-bottom.png" alt=""></a>
        </div>
      </section>
      <section class="page-part" id="award-range">
        <h2>评选范围</h2>
        <img class="body-img body-img-m" src="../assets/award-range-m.jpg" alt="">
        <router-link to="/award" target="_blank">查看具体奖项设置</router-link>
      </section>
      <section class="page-part" id="award-system">
        <h2>评选机制</h2>
        <div class="body-img-m-wrapper">
          <img class="body-img body-img-m" src="../assets/award-system.jpg" alt="">
        </div>
      </section>
      <section class="page-part" id="award-flow">
        <h2>参评流程</h2>
        <img class="body-img body-img-m" src="../assets/award-flow-m.jpg" alt="">
      </section>
      <vote isM='true'></vote>
      <h2 style="margin-top:20px">新闻报道</h2>
      <div class="topic-swiper summit-items swiper-container">
        <div class="swiper-wrapper summit-wrapper">
          <a class="swiper-slide summit-item" href="https://wallstreetcn.com/articles/3046668">
            <div class="summit-img" style=" backgroundImage:url(https://wpimg.wallstcn.com/0ff87504-44eb-4521-ad46-b454460e9e93.jpg?imageView2/1/w/240/h/192)"></div>
            <div class="summit-title">
              华尔街见闻2017金融领军者评选奖项名单揭晓
            </div>
          </a>
          <a class="swiper-slide summit-item" href="https://wallstreetcn.com/articles/3046848">
            <div class="summit-img" style=" backgroundImage:url(https://wpimg.wallstcn.com/62aabe7c-ee50-4c81-8f55-8db20aad2f79.png?imageView2/1/w/240/h/192)"></div>
            <div class="summit-title">
              中国民生银行小微金融斩获“年度卓越品牌营销活动银行”奖
            </div>
          </a>
          <a class="swiper-slide summit-item" href="https://wallstreetcn.com/articles/3046837">
            <div class="summit-img" style=" backgroundImage:url(https://wpimg.wallstcn.com/9218e755-b353-40e9-9d8f-cbe3c451a0a4.png?imageView2/1/w/240/h/192)"></div>
            <div class="summit-title">
              兴业研究获华尔街见闻“年度最具影响力金融研究机构”
            </div>
          </a>
          <a class="swiper-slide summit-item" href=" https://wallstreetcn.com/articles/3047038">
            <div class="summit-img" style=" backgroundImage:url(https://wpimg.wallstcn.com/fd613c8f-b34c-4e44-912b-c33aef6be308.png?imageView2/1/w/240/h/192)"></div>
            <div class="summit-title">
              凤凰金融获华尔街见闻“年度卓越金融科技机构”
            </div>
          </a>
          <a class="swiper-slide summit-item" href="https://wallstreetcn.com/articles/3046833">
            <div class="summit-img" style=" backgroundImage:url(https://wpimg.wallstcn.com/dc664cad-0a3f-4576-8a55-97d5caca8669.png?imageView2/1/w/240/h/192)"></div>
            <div class="summit-title">
              Fintech撬动新金融，未来监管与数据是重点
            </div>
          </a>
        </div>
      </div>
      <a href="https://wallstreetcn.com/topics/1000770?ivk=1" class="more-article">查看更多</a>
      <section class="page-part" id="award-what">
        <h2>获奖权益</h2>
        <img class="body-img body-img-m" src="../assets/award-what-m.jpg" alt="">
      </section>
      <section class="page-part" id="organize">
        <h2 class="black bottom0">组织架构</h2>
        <img class="body-img body-img-m" src="../assets/organize-m.jpg" alt="">
      </section>
      <section class="page-part" id="connect-us">
        <h2>联系我们</h2>
        <p>地址: 北京市朝阳区东三环中路 9 号富尔大厦506</p>
        <p>联系电话: 010-86393152 (802)</p>
        <p>联系邮箱: fca@wallstreetcn.com</p>
      </section>
    </div>
    <form-area :isFormShow.sync="isFormShow"></form-area>
  </div>
</template>

<script>
import Swiper from 'swiper'
import VideoWrapper from './components/VideoWrapper'
import FormArea from './components/FormArea'
import Vote from './components/Vote'

export default {
  name: 'home',
  components: {
    FormArea,
    VideoWrapper,
    Vote
  },
  // created() {
  //   if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
  //     this.$router.push('/')
  //   }
  // },
  data() {
    return {
      mobile: false,
      isFormShow: false
    }
  },
  methods: {
    showForm() {
      this.isFormShow=true
    }
  },
  mounted() {
    new Swiper('.topic-swiper', {
      // direction: 'horizontal',
      slidesPerView: 'auto',
      spaceBetween: 10
    })
  }
}
</script>
<style lang="scss" scoped>
  .summit-swiper-wrapper {
    background-color: #FAFAFA;
    padding-bottom: 30px;
  }
  .topic-swiper {
    padding: 10px 0px 0px 15px;
  }
  .summit-wrapper {

  }
  .more-article {
    display: block;
    font-size: 13px;
    color:#EDD498;
    text-align: center;
    padding: 20px 0px 30px;
  }
  .summit-items{
    .summit-item{
      display: block;
      width: 235px;
      background-color: #fff;
      box-sizing: border-box;
      .summit-img{
        width: 100%;
        height: 132px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .summit-title{
        padding: 8px 10px 10px;
        font-size: 13px;
        color: #333333;
      }
    }
  }
</style>

